<template>
  <div class="App">
    <h2>sum1: {{ sum1 }}</h2>
    <h2>sum2: {{ sum2 }}</h2>
    <h2>Car2的品牌: {{ car2.brand }}，Car2的颜色：{{ car2.options.color }}</h2>
    <button @click="addSum1">点击sum1+1</button>
    <button @click="addSum2">点击sum2+1</button>
    <button @click="changeCar2Brand">点击修改车的品牌</button>
    <button @click="changeCar2Color">点击修改车的颜色</button>
  </div>
</template>

<script setup lang="ts" name="App">
  import {ref,reactive,readonly,shallowReadonly} from "vue";
  //数据
  let sum1 = ref(0)
  let sum2 = readonly(sum1)  //参数是对象类型的
  let car1 = reactive({
    brand : '奔驰',         
    options :
    {
      color : 'red'         
    }
  })
  let car2 = shallowReadonly(car1)
  //方法
  function addSum1(){
    sum1.value += 1
  }  
  function addSum2(){
    sum2.value += 1     //无法修改
  }  
  function changeCar2Brand(){
    car2.brand = '宝马'   //无法修改
  }  
  function changeCar2Color(){
    car2.options.color = 'green'    //可以修改
  }  

</script>

<style scoped>

</style>


